<template>
	<view class="loginOut">
			<view class="counselorLoginPopup">
				<view class="popheader">
					<view>
						<image src="../../static/fx.png" mode="aspectFill"></image>
					</view>
					<view class="title">华农经管学院欢迎你</view>
			
				</view>
				
				<scroll-view scroll-y>
						<view class="content">
									
								<view class="number">
											<view class="title">编号</view>
											<input class="xx-input" type="number" v-model="numb"   :placeholder="title" />
										</view>
								<view class="pwd">
									<view class="title">密码</view>
									<input class="xx-input" password type="text" v-model="pwd"  placeholder="请输入密码" />
								</view>
										
								<button class="but" @click="loginGo">确认登录</button>
								
								<view class="role">
									<view class="text">
										--请选择登录角色--
									</view>
									
									<view class="change">
										<view class="left" @click="change(1)" :class="{active:isActive}">
											<view class="shang">
												<image src="../../static/teacher.png" mode=""></image>
											</view>
											<view class="xia">
												辅导员
											</view>
										</view>
										
										<view class="right" @click="change(0)" :class="{active1:isActive1}">
											<view class="shang">
												<image src="../../static/student.png" mode=""></image>
											</view>
											<view class="xia">
												学生
											</view>
										</view>
									</view>
								</view>
								
										
							 <view class="safe-area-shop">
							 	
							 </view>
							<view class="safe-area-inset-bottom">
								
							</view>
							
						</view>
				</scroll-view>
			
			</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { apiLogin } from '../../api/apis';
import CryptoJS from 'crypto-js';
const myCashData = ref({});
const title = ref("请输入辅导员编号");
var role =ref(0);//0是学生 1是老师
const numb = ref(null);//编号
const pwd = ref(null);//密码
const isActive = ref(true);
const isActive1 = ref(false);

const change = (e)=>{
	title.value = e===0?'请输入学号':'请输入辅导员编号';
	role = e;
	isActive.value = e===0?false:true;
	isActive1.value = e===0?true:false;
}

// 一键登录 模拟数据先
	const loginGo = async()=>{
		
		let phone = numb.value;
		let ppp   = pwd.value;
		//传给后台
		let data ={
			account:phone,
			password:ppp,
		}
		
		let res = await apiLogin(data);
		console.log(res);
		if(res.code==1){
			
			
			//写入缓存
			
			let userInfo = {
				token:res.data.userinfo.token,
				username:res.data.userinfo.username,
				avatarUrl:"../../static/fx.png",
				group_id:res.data.userinfo.group_id,
				group_name:res.data.userinfo.group_name
			}
			
			uni.setStorageSync('userInfo',userInfo);
			
			uni.showToast({
				title:"登录成功",
				icon:"none"
			})
			
			if(userInfo.group_id<1){
				//跳转至首页
				uni.switchTab({
					url:"/pages/user/user"
				})
			}else{
				//跳转至首页
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
			
			
		}else{
			uni.showToast({
				title:"登录失败",
				icon:"none"
			})
		}
		
	}


</script>

<style lang='scss' scoped>
.loginOut{
	.counselorLoginPopup{
		position: relative;
		background:#fff;
		padding: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		width:100vw;
		
		scroll-view{
			max-height: 60vh;
		}
		.popheader{
					text-align: center;
					padding-top: 250rpx;
					image{
						width: 100rpx;
						height: 100rpx;
					}
					.title{
						font-size: 34rpx;
						font-weight: 550;
						padding-left: 10rpx;
					}
					.text{
						font-size: 28rpx;
						line-height: 50rpx;
						padding-left: 10rpx;
					}
				}
		.content{
				padding:50rpx 0;
						
						.number{
							margin: 0 auto;
							width: 500rpx;
							padding: 30rpx 0;
							
							.title{
								color: $xx-color-body;
								font-weight: 600;
							}
							
							input{
								border-bottom: 1rpx solid $xx-color-body;
								height: 80rpx;
							}
							
						}
						.pwd{
							margin: 0 auto;
							width: 500rpx;
							padding: 30rpx 0;
							
							.title{
								color: $xx-color-body;
								font-weight: 600;
							}
							
							input{
								border-bottom: 1rpx solid $xx-color-body;
								height: 80rpx;
							}
						}
				.but{
							width: 500rpx;
							height: 80rpx;
							border-radius: 40rpx;
							background: $xx-color-body;
							color: #fff;
				}
				button::after{ border: none;}
				button{
					line-height:80rpx;
				}
				
				
				.role{
					padding-top: 30rpx;
					font-size: 26rpx;
					text-align: center;
					
					.change{
						display: flex;
						justify-content: space-around;
						padding: 20rpx 0;
						
						image{
							width:50rpx;
							height: 50rpx;
						}
						.left{
							
						
						}
						.active{
							color: $xx-color-body;
							
						}
						.active1{
							color: $xx-color-body;
							
						}
						
					}
				}
						
				
			
		}
	}
	
}	       
</style>

